<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <div class="item"></div>
    </div>
    <div id="container"></div>
    <script>
        /*
            相信看了前面的那几种获取元素的方式之后，你一定觉着很麻烦。要打那么长一串，开发者们自然也是意识到了这一点，我们在写css的时候，通过.和#的方式就可以获取到目标元素并且书写样式，所以开发者们将这个思想用在了新版的js里，也就是我们接下来要说的querySelector
        */ 

        // querySelector() 返回一个对象,使用的方式很简答，和css一样的方式
        console.log(document.querySelector('.box'));//通过className
        console.log(document.querySelector('.box>.item'));//通过子代选择器
        console.log(document.querySelector('#container'));//通过id
        // querySelectorAll() 返回一个伪数组合集
        console.log(document.querySelectorAll('div'));//通过tagName
    </script>
</body>
</html>